<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>酒店管理系统</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="/resources/zTree/plugin/css/index.css" media="all">

</head>
<body>
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>当前位置 首页>房间查询</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">酒店名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="name"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		</div>
        <div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-inline" >
		      <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
  	 </div>
	</form>
	<!-- 搜索结束-->
<!--   加载表格 -->
	<table class="layui-hide" id="hotelList" lay-filter="hotelList"></table>
	
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete">删除</button>
	</div>
	
<!-- 添加和修改的弹出层  -->	
<div id="dlg" style="display: none;margin: 10px">
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm">
	<div class="layui-form-item">
		  <div class="layui-form-item">
		  <div class="layui-inline">
		      <label class="layui-form-label">类型</label>
		      <div class="layui-input-inline">
		       <input type="hidden" name="id">
		        <input  type="radio" name="type"  value="1" title="标准间">
		        <input type="radio" name="type" value="2" title="豪华间" checked="">
		        <input type="radio" name="type" value="3" title="总统套房">
		      </div>
		    </div>
		  </div>
	
		    <div class="layui-inline">
		      <label class="layui-form-label">价格</label>
		      <div class="layui-input-inline">
		        <input type="number" name="price" id="price" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
			    <label class="layui-form-label">所属酒店</label>
			    <div class="layui-input-inline">
			      	 <select name="hotelid" id="hotelid" lay-filter="hotelid">
				      	 <option value=""></option>
				      </select>
			    </div>
			  </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">描述</label>
		      <div class="layui-input-block">
		         <textarea placeholder="请输入酒店描述" name="info"  class="layui-textarea"></textarea>
		      </div>
		    </div>
	
	</div>
	         <div class="layui-form-item" style="text-align: center;">
			      <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			      <!-- 本标签点击自动重置，和提交，若有其他需求，再标签中添加事件 -->
			      <button type="reset" class="layui-btn layui-btn-warm" id="doreset">重置</button> 
			  </div>
	</form>
</div>
	
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>
<script type="text/javascript">
var tableIns;
var form;
layui.use([ 'layer', 'jquery', 'table', 'form' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	 form = layui.form;
	//渲染表格
	 tableIns = table.render({
		elem : '#hotelList' //渲染表格的容器
		,
		url : '/room/loadAllRoom' //请求数据的地址
		,
		cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		,
		page : true //开启分页
		,
		toolbar : '#tableToolBar'//设置表头左上角的工具条  并开启表头右上角的工具栏
		,
		defaultToolbar : [ 'filter', 'print' ] //设置工具栏的位置和是否显示
		,
		height:'430px',
		cols : [ [ {
			field : 'id',
			width : 80,
			title : 'ID',
			align : 'center'
		}, {
			field : 'name',
			width : 120,
			title : '酒店名称',
			align : 'center'
		}, {
			field : 'type',
			title : '房型',
			width : 100,
			templet:function(d){
				switch(d.type){
				case 1 :
					return '<font color=blue>标准间</font>';
					break;
				case 2 :
					return '<font color=red>豪华间</font>';
					break;
				case 3 :
					return '<font color=yello>总统套房</font>';
					break;
				}
			},
			align : 'center'
		}, {
			field : 'price',
			title : '价格',
			align : 'center'
		}, {
			field : 'address',
			width : 120,
			title : '地址',
			align : 'center'
		},{
			field : 'mobile',
			width : 120,
			title : '电话',
			align : 'center'
		}, {
			width : 137,
			title : '操作',
			align : 'center',
			toolbar : "#tableCellToolBar",
			fixed : 'right',
			align : 'center'
		} ] ]
	});
	
	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/room/loadAllRoom?'+params,
			page : {
				curr : 1
			}
		});
	});	
	
	//价格验证
	form.verify({
		validateMoney:[
			/^[+]{0,1}(\d+)$/ //正则表达式
			,'金额只能为正数,且小于10000' //提示信息
		]
	});
	
	//监听表头事件
	table.on('toolbar(hotelList)', function(obj){
	 /*  var checkStatus = table.checkStatus(obj.config.id); */
	  switch(obj.event){
	    case 'add':
	      //layer.msg('添加');
	    
	      openAdd();
	    break;
	  };
	});

	//监听行工具条
	table.on('tool(hotelList)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  //alert(data.loc);
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		 if(layEvent === 'delete'){ //删除
			  layer.confirm('真的删除么', function(index){   //先提示是否删除
				   $.post("/room/deleteRoom?id="+data.id,function(result){
					   if(result.code==200){
						   layer.msg(result.msg);  //删除成功
						   //刷新表格，即自动调用search方法
				    		  $("#doSearch").click();  //或者  刷新表格tableIns.reload();
					   }else{
						   layer.msg(result.msg);
					   };
				   });
		    	
			  });
		    };
		  }
		);
	
	 //打开添加的弹出层
	  var url=""
	  var mainIndex;//弹出层的索引
	  function openAdd(){
		  
		mainIndex=layer.open({
			title:"添加客房",
			type:1,
			area:['700px','500px'],
		    content:$("#dlg"), //内容可是是HTML，一个<div>
			success:function(layero,index){  //弹出层，弹出成功后调用方法的方法
				$("#doreset").click();          //先清空表单，以免保留了之前修改，添加时添加的数据
			url="/room/addRoom";  //备用于保存功能
			}
		});
	}
	  
	  //做保存  ,因为添加和修改用的页面相同，故此保存方法为页面都用
	  form.on('submit(doSubmit)', function(data){
	       var params=$("#dataFrm").serialize(); //获取表单数据，用于传往后台controller
	       alert(params);
	       $.post(url,params,function(obj){
	    	  if(obj.code==200){
	    		  layer.msg(obj.msg);
	    		  layer.close(mainIndex);  //根据弹出层索引，关闭弹出层
	    		  //刷新表格，即自动调用search方法
	    		  $("#doSearch").click();   //或者  刷新表格tableIns.reload();
	    	  }else{
	    		  layer.msg(obj.msg);
	    	  }
	       });
	       return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	   
	  
	  leaderHotelChange();
	  function leaderHotelChange(){
	  	//alert(id);
	  	$.post("/hotel/loadHotel",function(obj){
	  		if(obj.length>0){
	  			$("#hotelid").html("");//清空
	  			for(var i=0;i<obj.length;i++){
	  				$("#hotelid").append("<option value="+obj[i].id+" >"+obj[i].name+"</option>");
	  			}
	  			form.render("select");
	  		};
	  	});
	    };   
	
	/*     form.verify({
	    	price: function(value){
	          if(value.length < 5){
	            return '标题至少得5个字符啊';
	          }
	        }
	       /*  price: [
	          /^[\S]{1,4}$/
	          ,'价格必须0到10000之间 哦，且不能出现空格'
	        ] 
	      }); */

	    
});//layui结束**************************************  
     
 

</script>

</html>